<template>
<!--基本信息页面-->
  <div class="message">
    <topDiv>
      基本信息
    </topDiv>
      <ul v-if="info">
        <li>
          <label for="1"><span>姓名</span></label>
          <input type="text" id="1" v-model="info.name">
        </li>
        <li>
          <label for="2"><span>年级</span></label>
          <input type="text" id="2" v-model="info.period">
        </li>
        <li>
          <label for="3"><span>班级</span></label>
          <input type="text" id="3" v-model="info.class">
        </li>
        <li>
          <label for="4"><span>专业</span></label>
          <input type="text" id="4" v-model="info.professional">
        </li>
        <li>
          <label for="5"><span>职位</span></label>
          <input type="text" id="5" v-model="info.identity">
        </li>
        <li>
          <label for="6"><span>密码</span></label>
          <input type="password" id="6" v-model="info.password">
        </li>
      </ul>
      <div v-else>
        数据加载失败
      </div>
      <button @click="upData">修改信息</button>
  </div>
</template>

<script>
import {getUser,upUser} from 'request/useData'
import {parseCookie} from 'ulit/parse'
import topDiv from 'components/share/mine/topDiv'
export default {
  name:'message',
  data(){
    return {
      info:null
    }
  },
  components:{
    topDiv
  },
  computed:{

  },
  methods:{
    useData(){
      getUser(parseCookie()).then(res=>this.info=res.data)
    },
    upData(){
      upUser(this.info).then(res=>{
        if(res.data.status){
          alert('更新成功')
        }else{
          alert('更新失败，请稍后再试')
        }
      })
    }
  },
  mounted(){
    this.useData()
  }
}
</script>

<style lang="less" scoped>
.message{
  ul{
    box-sizing: border-box;
    padding: 1rem;
    list-style: none;
    li{
      padding: 1rem 0;
      font-family: 'Courier New', Courier, monospace;
      font-size: 1.5rem;
      display: flex;
      justify-content: space-between;
      input{
        width: 40%;
        text-align: center;
        border: none;
        outline: none;
      }
    }
  }
  button{
    display: inherit;
    margin: 0 auto;
    background-color: #31c27c;
    color: #fff;
    padding: 0.5rem;
    border: none;
    border-radius: 5px;
  }
}
</style>